<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" class="fonts">
      <el-breadcrumb-item :to="{ path: '/shop' }"
        >内容管理</el-breadcrumb-item
      >
      <el-breadcrumb-item :to="{ path: '/shop' }">4S店管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加4S店</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
      class="demo-ruleForm"
      style="width: 300px; margin-top: 30px"
    >
      <el-form-item label="店铺名称" prop="name">
        <el-input
          v-model="ruleForm.name"
          placeholder="请输入4S店名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="店铺短名称" prop="shortName">
        <el-input
          v-model="ruleForm.shortName"
          placeholder="请输入4S店短名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="店铺主修品牌" prop="imports">
        <el-select v-model="ruleForm.carBrandId" placeholder="请选择汽车品牌">
          <el-option v-for="item in cartables" :key="item.id" :label="item.name" :value="item.id" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="店铺折扣" prop="discount">
        <span style="margin-right: 10px">工时</span>
        <el-input v-model="ruleForm.discount" style="width: 50px"></el-input>
        <span style="margin-left: 10px">折</span>
      </el-form-item>
      <el-form-item label="所在区域" prop="imports">
        <el-select v-model="ruleForm.area" placeholder="请选择区域">
          <div >
            <el-option v-for="item in area" :key="item.id" :label="item.name" :value="item.vule"></el-option>
          </div>
        </el-select>
      </el-form-item>
      <el-form-item label="店铺地址" prop="location">
        <el-input
          v-model="ruleForm.location"
          placeholder="请输入店铺地址"
        ></el-input>
      </el-form-item>
      <el-form-item label="店铺是否签约" prop="imports">
        <el-radio v-model="ruleForm.sign" label="未签约" value="未签约"
          >未签约</el-radio
        >
        <el-radio v-model="ruleForm.sign" label="已签约" value="已签约"
          >已签约</el-radio
        >
      </el-form-item>
      <div>
        <el-button type="primary" style="margin-left: 50px" @click="saveBtn"
          >保存</el-button
        >
        <el-button style="margin-left: 40px" @click="backlbtn">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartables:[],
      ruleForm: {
        name: "",
        shortName: "",
        carBrandId: "",
        discount: "",
        area: "",
        location: "",
        sign: "未签约",
      },

      //规则
      rules: {
        name: [{ required: true, message: "请输入4S店名称", trigger: "blur" }],
        shortName: [
          { required: true, message: "请输入4S店短名称", trigger: "blur" },
        ],
        imports: [{ required: true, trigger: "blur" }],
        location: [
          { required: true, message: "请输入店铺地址", trigger: "blur" },
        ],
        discount: [{ required: true, message: "请输入折扣", trigger: "blur" }],
      },

      //区域表
      area: [
        { id: 1, name: "锦江区", vule: "锦江区" },
        { id: 2, name: "青羊区", vule: "青羊区" },
        { id: 3, name: "金牛区", vule: "金牛区" },
        { id: 4, name: "武侯区", vule: "武侯区" },
        { id: 5, name: "成华区", vule: "成华区" },
        { id: 6, name: "龙泉驿区", vule: "龙泉驿区" },
        { id: 7, name: "青白江区", vule: "青白江区" },
        { id: 8, name: "新都区", vule: "新都区" },
        { id: 9, name: "温江区", vule: "温江区" },
        { id: 10, name: "双流区", vule: "双流区" },
        { id: 11, name: "郫都区", vule: "郫都区" },
        { id: 12, name: "新津区", vule: "新津区" },
        { id: 13, name: "高新区", vule: "高新区" },
        { id: 14, name: "简阳市", vule: "简阳市" },
        { id: 15, name: "都江堰市", vule: "都江堰市" },
        { id: 16, name: "彭州市", vule: "彭州市" },
        { id: 17, name: "邛崃市", vule: "邛崃市" },
        { id: 18, name: "大邑市", vule: "大邑市" },
        { id: 19, name: "蒲江县", vule: "蒲江县" },
        { id: 20, name: "成都天府新区", vule: "成都天府新区" },
      ],
    };
  },
  created() {

    //汽车品牌列表
    this.$axios({
      url: "/carBrand/findAll",
      method: "GET",
    })
    .then((res) => {
      console.log(res);
      if (res.data.code === 0) {
        // console.log(res.data.data);
        this.cartables=[...res.data.data]
        console.log(this.cartables);
        // for(let i=0;i<this.cartables.length;i++){
        //   // console.log(this.cartables[2].name);
        //   // this.cartable.push("46546")
        //   this.cartable.push(this.cartables[i].name) 
        // }
      }
    });
  },
  methods: {

    //确认添加请求
    saveBtn() {
      console.log(this.ruleForm);
      this.$axios({
        url: "/S4Manage/add",
        method: "POST",
        data: this.ruleForm,
      }).then((res) => {
        console.log(res);
        // console.log(this.ruleForm.carBrandId);
        this.$message('添加成功');
        this.$router.push({ path: "/shop" })
      });
    },
  },
  backlbtn(){
    this.$router.push({ path: "/shop" })
  }
};
</script>

<style>
.fonts{
  font-size: 20px;
}
</style>